<template>
	<view class="home">
		<!-- 进度条 -->
		<view class="progress">
			<!-- 进度条组件 -->
			<!-- percent指完成进度  show-info指是否显示百分比 stroke-color指进度条颜色 -->
			<cmd-progress :percent="number/$store.state.questions.length*100" :show-info="false" stroke-color="#6ed90a">
			</cmd-progress>
		</view>
		<!-- 问题部分 -->
		<view class="questions" style="position: relative;" @touchstart="start" @touchend="end">
			<swiper class="swiper" :current="this.now" :indicator-dots="false" duration="0" @change="getIndex">
				<!-- @change="isType(questions[current].type)" -->
				<swiper-item v-for="(item,index) in $store.state.questions">
					<!-- 题目序号与类型 -->
					<view class="numbers">
						{{(index+1)+"."}}
						<view class="types">
							{{item.type}}
						</view>
						<view class="scores">
							分值：{{item.score}}分
						</view>
					</view>
					<!-- 题目内容 -->
					<view class="texts">
						<p v-html="item.text"></p>
					</view>
					<!-- 选择题选项样式 -->
					<view class="radioss" v-show="isChoice">
						<radio-group class="radios" @change="radioChange">
							<label v-for="(it,ind) in item.options" :key="it.value" class="rad">
								<view>
									<radio class="radio" :value="it.value" :checked="ind === current" color="#007AFF" />
								</view>
								<p v-html="it.text"></p>
							</label>
							<view class="myScores">得分：{{questionMsg[index].score}}分</view>
							<view class="manswer">我的答案：<p v-html="questionMsg[index].stuAnswer[0]"></p>
							</view>
							<view class="answer">正确答案：<p v-html="questionMsg[index].correctAnswer[0]"></p>
							</view>
							<view class="answer">题目解析：<p v-html="questionMsg[index].analyze"></p>
							</view>
						</radio-group>
					</view>
					<!--          判断题样式-->
					<view class="radioss" v-show="isJudege">
						<radio-group class="radios">
							<label class="rad">
								<view>
									<radio class="radio" color="#007AFF" />
								</view>
								<view class="text">{{judgeChoice.right}}</view>
							</label>
							<label class="rad">
								<view>
									<radio class="radio" color="#007AFF" />
								</view>
								<view class="text">{{judgeChoice.error}}</view>
							</label>
							<view class="myScores">得分：{{questionMsg[index].score}}分</view>
							<view class="manswer">我的答案：<p v-html="questionMsg[index].stuAnswer[0]"></p>
							</view>
							<view class="answer">正确答案：<p v-html="questionMsg[index].correctAnswer[0]"></p>
							</view>
							<view class="answer">题目解析：<p v-html="questionMsg[index].analyze"></p>
							</view>
						</radio-group>
					</view>
					<!-- 填空题样式 -->
					<view class="radioss" v-show="isGap">
						<radio-group>
							<!-- <textarea class="in" placeholder="请输入答案"></textarea> -->
							<view class="myScores">得分：{{questionMsg[index].score}}分</view>
							<view class="manswer">我的答案：<p v-html="questionMsg[index].stuAnswer[0]"></p>
							</view>
							<view class="answer">正确答案：<p v-html="questionMsg[index].correctAnswer[0]"></p>
							</view>
							<view class="answer">题目解析：<p v-html="questionMsg[index].analyze"></p>
							</view>
						</radio-group>
					</view>
					<!-- 简答题样式 -->
					<view class="radioss" v-show="isComprehensive">
						<view class="myScores">得分：{{questionMsg[index].score}}分</view>
						<view class="manswer">我的答案：<p v-html="questionMsg[index].stuAnswer[0]"></p>
						</view>
						<view class="answer">正确答案：<p v-html="questionMsg[index].correctAnswer[0]"></p>
						</view>
						<view class="answer">题目解析：<p v-html="questionMsg[index].analyze"></p>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 双击显示答题栏状况 -->
		<view class="profile" v-show="pop()">
			<circulate></circulate>
		</view>
	</view>
</template>

<script>
	import {
		//getTestDDL,
		getPaperMsg,
		getQuestions
	} from '../../api/file.js'
	import circulate from "../../components/testDetail/testDetail-circulate.vue"
	export default {
		data() {
			return {
				judgeChoice: {
					right: '√',
					error: 'X'
				},
				token: uni.getStorageSync('token'),
				paperId: uni.getStorageSync('paperId'),
				//当前题号
				now: 0,
				// 答题状态栏
				bool: false,
				startData: {
					clientX: 0,
					clientY: 0
				},
				questionPaper: {
					sumScore: 0
				},
				// 题目类型
				isChoice: false,
				isGap: false,
				isComprehensive: false,
				isJudege: false,
				// 选择题当前选择选项
				current: -1,
				// 选择题选项名
				alphabet: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				number: 0,
				questionMsg: [],
			}
		},
		components: {
			circulate
		},
		created() {
			//获取考生试卷答案
			this.getPaper()
			// this.questionMsg = this.$store.state.questionMsg
			if (this.$store.state.questions[this.now].type == "选择题") {
				this.isChoice = true;
				this.isGap = false;
				this.isComprehensive = false;
				this.isJudege = false;
			} else if (this.$store.state.questions[this.now].type == "判断题") {
				this.isChoice = false;
				this.isGap = false;
				this.isComprehensive = false;
				this.isJudege = true;
			} else if (this.$store.state.questions[this.now].type == "填空题") {
				this.isChoice = false;
				this.isGap = true;
				this.isComprehensive = false;
				this.isJudege = false;
			} else if (this.$store.state.questions[this.now].type == "简答题") {
				this.isChoice = false;
				this.isGap = false;
				this.isComprehensive = true;
				this.isJudege = false;
			}
		},
		onLoad(option) {
			this.now = option.id;
			this.number = Number(this.now) + 1;
			//console.log("页面下标：",this.number)
		},
		methods: {
			//获取考生试卷作答详情
			getPaper() {
				getPaperMsg({
					testId: uni.getStorageSync("testCode"),
					paperId:uni.getStorageSync('paperId'),
					studentNum: uni.getStorageSync("studentNum")
				}).then(res => {
					var dataType = []
					var questionMsgTemp = res.data.data.questionMsg;
					for (var i = 0; i < this.$store.state.questions.length; i++) {
						dataType.push(this.$store.state.questions[i].type);
					}
					dataType = Array.from(new Set(dataType));
					//通过循环调整questionMsg的题目顺序
					for (var x of dataType) {
						for (var y of questionMsgTemp) {
							if (x == y.type) {
								this.questionMsg.push(y);
							}
						}
					}
					this.$store.state.questionMsg = this.questionMsg
					console.log("this.questionMsg", this.questionMsg);
				})
			},
			getIndex(e) { //根据题目类型决定页面是否显现
				this.number = e.detail.current + 1;
				if (this.$store.state.questions[e.detail.current].type == "选择题") {
					this.isChoice = true;
					this.isGap = false;
					this.isComprehensive = false;
					this.isJudege = false;
				} else if (this.$store.state.questions[e.detail.current].type == "判断题") {
					this.isChoice = false;
					this.isGap = false;
					this.isComprehensive = false;
					this.isJudege = true;
				} else if (this.$store.state.questions[e.detail.current].type == "填空题") {
					this.isChoice = false;
					this.isGap = true;
					this.isComprehensive = false;
					this.isJudege = false;
				} else if (this.$store.state.questions[e.detail.current].type == "简答题") {
					this.isChoice = false;
					this.isGap = false;
					this.isComprehensive = true;
					this.isJudege = false;
				}
			},
			// 选择题选项
			radioChange: function(evt) {
				for (let i = 0; i < this.options.length; i++) {
					if (this.options[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			// 综合题拍照
			takePhoto() {
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						this.src = res.tempImagePath
					}
				});
			},
			pop() {
				return this.bool;
			},
			// touch事件监听，start获取手指开始位置，end获取手指结束位置
			start(e) {
				this.startData.clientX = e.changedTouches[0].clientX;
				this.startData.clientY = e.changedTouches[0].clientY;

			},
			end(e) {
				const subX = e.changedTouches[0].clientX - this.startData.clientX;
				const subY = e.changedTouches[0].clientY - this.startData.clientY;
				//console.log("subY ", subY);
				// 判断滑动，bool控制答题状态栏是否出现
				if (subY < -80) {
					this.bool = true;
				} else if (subY > 50 || subY === 0) {
					this.bool = false;
				}
			},
		}
	}
</script>

<style lang="scss">
	/* 问题部分 */
	.questions {
		top: -15rpx;
		margin: 15rpx;
		position: relative;
	}

	/*答题栏状态*/
	.profile {
		position: absolute;
		bottom: 10rpx;
	}

	/* swiper */
	.swiper {
		height: 1100rpx;
	}

	.numbers {
		display: flex;
		flex-direction: row;
	}

	.types {
		font-size: 30rpx;
		color: #5FADFF;
		border-radius: 10rpx;
		border-style: solid;
		border-width: 3rpx;
		border-color: #5FADFF;
	}
	.texts{
		margin:20rpx 0rpx;
	}
	
	//标准答案
	.answer {
		color: #5FADFF;
		margin: 15rpx 0rpx;
		display: block;
	}
	//我的答案
	.manswer {
		margin: 15rpx 0rpx;
		display: block;
	}

	//题目分值
	.scores {
		color: #686868;
		background-color: #e1e1e1;
		width: 170rpx;
		margin: 15rpx 0rpx;
		position: absolute;
		right: 0;
	}

	//我的得分
	.myScores {
		color: #686868;
		background-color: #e1e1e1;
		width: 170rpx;
		margin: 15rpx 0rpx;
		left: 10;
	}

	/* 选择题样式 */
	.radioss {
		margin-top: 60rpx;
	}

	.radios {
		display: flex;
		flex-direction: column;
		margin: 15rpx;
	}

	// radio按钮大小
	.radio {
		transform: scale(0.8);
	}

	.rad {
		margin-bottom: 25rpx;
		display: flex;
		flex-direction: row;
	}

	/* 填空题样式 */
	.in {
		width: 90%;
		border-radius: 10rpx;
		border-style: solid;
		border-width: 3rpx;
		border-color: #595959;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	/* 综合题样式 */
	.shoot {
		width: 80%;
		background-color: #03abff;
		color: white;
	}
</style>
